<template>
  <PageListContainer>
    <div class="base-block">
      <!-- <KSearch ref="searchRef" label-width="80px" inline :model="form" @update:submit="handleQuery" @update:reset="handleReset"> -->
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="客户搜索" prop="key_word">
          <el-input v-model="state.params.key_word" placeholder="请输入姓名、手机号" clearable />
        </el-form-item>

        <el-form-item label="渠道" prop="channel">
          <el-select v-model="state.params.channel" placeholder="不限">
            <el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="提交时间">
          <el-date-picker
            v-model="state.params._timeArr"
            value-format="YYYYMMDD"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            clearable
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #actions="record">
          <el-link type="primary" @click="handleOpenDrawer(record.row)">编辑</el-link>
          <el-link type="danger" @click="handleDelete(record.row)">删除</el-link>
        </template>
      </k-table>
    </div>
    <EditModal ref="editModalRef" @after-submit="handleAfterSubmit" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useTableList, channelOptions } from './hooks/use-table';
import { ElMessageBox, ElMessage } from 'element-plus';
// import EditModal from './components/edit-modal.vue';
import EditModal from './components/edit-modal.vue';
import { deleteMajorCustomer } from '@/api/crm-kgj/user';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';
import { AuthCode, hasPermission } from '@/modules/auth';

defineOptions({
  name: 'KgjMajorCustomer'
});

const { state, tableState, tableEvent, ...methods } = useTableList({});

const editModalRef = ref();

const handleOpenDrawer = (row) => {
  if (hasPermission(AuthCode.KGJ_USER_MAJOR_CLUE_EDIT)) {
    editModalRef.value.show(1, row);
  }
};

const handleDelete = (row) => {
  if (hasPermission(AuthCode.KGJ_USER_MAJOR_CLUE_DEL)) {
    ElMessageBox.confirm('您确定要删除该客户信息？', '删除', {
      type: 'warning',
      beforeClose: async (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true;
          const res = await deleteMajorCustomer({ id: row.id });
          if (!res.err) {
            done();
          }
          instance.confirmButtonLoading = false;
        } else {
          done();
        }
      }
    })
      .then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功'
        });
        methods.onSearch();
      })
      .catch((err) => {
        console.error(err);
      });
  }
};

const handleAfterSubmit = () => {
  methods.onSearch();
};
</script>
<style lang="scss" scoped>
.user-info {
  display: flex;
  align-items: center;

  .name {
    max-width: 63px;
    margin: 0 5px;
    cursor: pointer;
  }

  .iden {
    padding: 0 8px;
    line-height: 20px;
    color: #fff;
    background: var(--brand-6);
    border-radius: 2px;

    &.iden2 {
      color: #909399;
      background: #e6e8eb;
    }
  }
}
</style>
